<template>
  <div class="van-scanner">
    <!-- 全屏遮罩 -->
    <van-overlay :show="fullscreenLoading">
      <template>
        <div style="height:90vh; width:100vw; display: flex;justify-content: center;align-items: center">
          <van-loading type="spinner" color="1989fa" size="30px" text-size="30px" text-color="#0094ff">{{ scanText }}</van-loading>
        </div>
        <div style="width: 100%;display: flex;justify-content: center; align-items: center">
          <van-button type="danger" @click.stop="stopScanFn">停止扫码</van-button>
        </div>
      </template>
    </van-overlay>
  </div>
</template>

<script>
import {Scanner} from "../utils/scanner";

export default {
  name: "vanScanner",
  props: {
    scanText: {
      type: String,
      default: "请扫码..."
    },
  },
  mounted() {
    const that = this;
    /* 初始化扫码 */
    that.scanner = new Scanner(that.$refs.stepNo1TlRef, false, e => {
      that.scanner.execScannerFn(e, that.scanner , scanParam => that.processScanResultFn(scanParam))
    });
  },
  data() {
    return {
      /* 全局函数 */
      fullscreenLoading: false,

      /* 扫码 */
      scanner: null,
    }
  },
  methods: {
    /* 开始扫码 上级调用 */
    startScanFn() {
      const that = this;
      that.fullscreenLoading = true;
      that.scanner.watchScannerFn();
    },

    /* 停止扫码 */
    stopScanFn() {
      const that = this;
      that.fullscreenLoading = false;
      that.scanner.removeScannerFn();
    },

    /* 处理扫码结果 */
    processScanResultFn(scanParam) {
      const that = this;
      that.$emit("scanned", scanParam);
    },
  }
}
</script>

<style lang="scss" scoped>
.van-scanner {
  ::v-deep .van-overlay {
    z-index: 99999;
  }
}
</style>